/* variables constants */

$BASE-REM: 50;

/* mixins */

@mixin flex_dis {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

@mixin clip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin flex($attribute, $attributeValue) {
  #{$attribute}: $attributeValue;
  -webkit-#{$attribute}: $attributeValue;
}

@mixin useFontSmoothingOnMacOS {
  :host {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@mixin DEBUG {
  header,
  footer,
  main,
  ul,
  li,
  section,
  div,
  button,
  p,
  header,
  main,
  footer {
    //outline: 1px solid #00cec9;
  }
  // a,
  // span {
  //     outline: 1px solid #ff0080;
  // }
  // i {
  //     outline: 1px solid #ff6666;
  // }
  // img {
  //     outline: 1px solid #ffdb4d;
  // }
}

/**
 * @description: 适应小于12px字体显示 
 */

@mixin useFontSizeLT12($targetFontSizeRem, $align: center) {
  $targetFontSizePx: $targetFontSizeRem * $BASE-REM;
  // 是否小于12
  @if ($targetFontSizePx >=12) {
    font-size: $targetFontSizePx px;
  } @else {
    font-size: 12px;

    transform: scale($targetFontSizePx / 12); /* IE 9 */
    transform-origin: $align center;
  }
}

@mixin useEllipsis($width: 2rem) {
  /* 昵称超出省略 */
  max-width: $width;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 绝对定位 : 修复 top3 人数少于3的错位 */
.container-main__top3 {
  position: relative;
  .top3-item {
    position: absolute;
    margin-top: 0 !important;
    /* 新秀值过高 样式错位 */
    // .top3--value,
    .top3--nickname {
      @include useEllipsis(1.76rem);
    }
    .top3--value,
    .top3--gap {
      white-space: nowrap;
    }
  }
  .top3-1 {
    top: 0.04rem;
    left: 2.46rem;
  }
  .top3-2 {
    top: 0.42rem;
    left: 0.48rem;
  }
  .top3-3 {
    top: 0.58rem;
    // right: 0.48rem;
    left: 4.64rem;
  }
}

.other-main__holder {
  height: 4rem;
  @include flex_dis();
  @include flex(justify-content, center);
  @include flex(align-items, center);
  font-size: 0.28rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffee85;
}
